<template>
  <div>
    <Form ref="form" :label-width="120" >
      <Collapse v-model="collapse2">
        <Panel name="1">
          货位信息
          <p slot="content">
            <EditTable ref="table1" v-model="datas" :columns="tableColumn">
              <div slot="buttons">
                <Button type="primary" icon="md-add" @click="addNewRow" ghost>新增一行</Button>
                <Button type="primary" icon="md-add" @click="getData" ghost>获取数据</Button>
              </div>
            </EditTable>
          </p>
        </Panel>
      </Collapse>
    </Form>
  </div>
</template>

  <script>
    import EditTable from "@/components/edit-table"

    const deleteButton = (vm, h, currentRow, index) => {
      return h(
        "Button",
        {
          props: {
            type: "error",
            size: "small",
            ghost: true
          },
          style: {
            margin: "0 5px"
          },
          on: {
            click: () => {
              vm.deleteRow(index);
            }
          }
        },
        "删除"
      );
    };


    export default {
      name: 'editable-demo',
      components: {
        EditTable
      },
      data() {
        return {
          collapse2: "1",
          datas: [],
          cellTypeList: [{label: "正常", value: "01"}, {label: "报废", value: "02"}]
        }
      },
      computed: {
        tableColumn() {
          let column = [];
          let self = this;
          column.push({
            title: '序号',
            type: 'index',
            minWidth: 70,
            fixed: "left",
            align: 'center',
          })
          column.push({
            title: '货位名称',
            key: 'cell_name',
            align: 'center',
            minWidth: 190,
            sortable: true,
            editor: {
              type: "text"
            }
          })
          column.push({
            title: '到期日期',
            key: 'expire_date',
            minWidth: 140,
            align: 'center',
            editor: {
              type: "date",
              format: "yyyy-MM-dd",
              editable: true
            },
          })
          column.push({
            title: '货位类型',
            key: 'cell_type',
            minWidth: 180,
            align: 'center',
            sortable: true,
            editor: {
              type: "select",
              enums: this.cellTypeList
            }
          })
          column.push({
            title: '是否使用',
            key: 'is_mrb',
            align: 'center',
            minWidth: 130,
            sortable: true,
            default: "1",
            editor: {
              type: "select",
              enums: [
                {value: "1", label: "是"},
                {value: "0", label: "否"}
              ]
            }
          })
          column.push({
            title: "编辑",
            key: "permissionId",
            align: "center",
            minWidth: 100,
            fixed: "right",
            render: function (h, param) {
              return h("div", [deleteButton(self, h, param.row, param.index)]);
            }
          });
          return column
        }
      },
      methods: {
        deleteRow: function (index) {
          this.datas.splice(index, 1);
          this.$refs.table1.tableRefresh();
        },
        addNewRow: function () {
          let row = {
            is_mrb: "1",
            expire_date: ""
          };
          this.datas.push(row);
        },
        getData: function () {
          let cellDatas = JSON.stringify(this.$refs.table1.getTableData());
          alert(cellDatas);
        }
      },
      created() {

      }

    }
  </script>

<style lang="less" scoped>

</style>
